 <template>
  <div id="app">
    <el-select filterable :filter-method="pinyinMatch" v-model="value1" :disabled="role >=  3" placeholder="请选择学院" >
      <el-option
        v-for="item in source"
        :key="item"
        :label="item"
        :value="item">
      </el-option>
    </el-select>

    <el-select v-model="value2" placeholder="请选择年级">
      <el-option
        v-for="item in secondList"
        :key="item"
        :label="item"
        :value="item">
      </el-option>
    </el-select>
<!--    <el-select v-model="value3" placeholder="请选择班级">
      <el-option
        v-for="item in thirdList"
        :key="item"
        :label="item"
        :value="item">
      </el-option>
    </el-select> -->
    &nbsp;
    <el-button type="primary" @click="reset()" size="small">重置</el-button>
    <br />
    <br />
    <div id="main" style="width: 800px;height:600px;margin: 0 auto;"></div>
  </div>
</template>

<script>
import pinyin from 'pinyin-match'
import { debounce } from '@/myUtils/debounce'
export default {
  name: 'app',
  data () {
    return {
      timeout: '',
      MapData: [],
      MapDatas: [],
      levelFirst: '',
      firstList: [],
      levelSecond: '',
      secondList: [],
      levelThird: '',
      thirdList: [],
      levelFourth: '',
      fourthList: [],
      defaultCollege: '', // 默认学院名称
      copyDept: '',
      source: '',
      dataList: [], // 整个树表
      erDataList: [], // 存二级表
      sanDataList: [], // 存三级表
      options: [{
        value: '大庆师范学院',
        label: '大庆师范学院'
      }],
      temp: {
        value: '',
        label: ''
      },
      value1: '', // 学院
      value2: '', // 年级
      value3: '', // 班级
      v2length: 0,
      evaluate: '',
      shuju: [],
      role: 0,
      params: {
        institute: '',
        grade: '',
        classe: ''
      },
      data: {
        ids: '',
        flag: ''
      }
    }
  },
  // 当检测到value1变的时候，查询原本的dataList通过对应的位置,
  // 然后获取secondList中的值,依次类推，当监听到上一级变化的时候，后面的数据变为空
  watch: {
    value1 (newname, oldname) {
      // 进行重置
      this.secondList = []
      this.value2 = ''
      this.thirdList = []
      this.value3 = ''
      if (newname === ' ') {
        newname = ''
        this.params.institute = ''
        this.organizationMap()
        return
      }
      for (let k = 0; k < this.dataList.length; k++) {
        if (this.dataList[k].name === newname) { // 检测选择了哪个
          // 构建参数
          this.data.ids = this.dataList[k].parentIds + this.dataList[k].id + ','
          this.params.institute = newname
          this.organizationMap()
          // 更改选择框
          this.erDataList = this.dataList[k].children
          for (let i = 0; i < this.erDataList.length; i++) {
            this.secondList.push(this.erDataList[i].name)
          }
          return
        }
      }
    },
    value2 (newname, oldname) {
      this.v2length = this.value2.length
      this.data.flag = ''
      this.thirdList = []
      this.value3 = ''
      if (newname === ' ') {
        newname = ''
        this.params.grade = ''
        this.gradeMap()
        return
      }
      if (newname === '') {
        return
      }
      for (let w = 0; w < this.dataList.length; w++) {
        if (this.erDataList[w].name === newname) {
          // 构建参数
          this.data.ids = this.erDataList[w].parentIds + this.erDataList[w].id + ','
          this.params.grade = newname
          this.gradeMap()
          // 更改选择框
          // this.sanDataList = this.erDataList[w].children
          // for (let a = 0; a < this.sanDataList.length; a++) {
          //   this.thirdList.push(this.sanDataList[a].name)
          // }
          return
        }
      }
    }
  },
  mounted () {
    this.getTree()
  },
  methods: {
    // 获取当前登录用户信息
    getUserInfo () {
      this.$http({
        url: '/sys/user/info',
        method: 'get'
      }).then(({data}) => {
        if (data.success) {
          // 学院账号
          if (data.user.roleIds === '52211ea85fbe423a8f3d11c39e09dc51') {
            this.role = 2
            this.officeName = data.user.office.name
            this.defaultCollege = this.officeName
          }
          if (data.user.roleIds === '2a21eb97b6dc4b1ba64ca654d38be348') {
            // 辅导员老师账号
            this.role = 3
            this.officeName = data.user.office.name
            this.defaultCollege = this.officeName
            for (let k = 0; k < this.dataList.length; k++) {
              if (this.dataList[k].name === this.officeName) { // 检测选择了哪个
                // 构建参数
                this.data.ids = this.dataList[k].parentIds + this.dataList[k].id + ','
                // 更改选择框
                this.erDataList = this.dataList[k].children
                for (let i = 0; i < this.erDataList.length; i++) {
                  this.secondList.push(this.erDataList[i].name)
                }
              }
            }
          }
          if (data.user.roleIds === 'b930ac75924c47f99ac92c6fc8c3accb') {
            // 学生账号
            this.role = 4
            this.searchForm.name = data.user.name
          }
          this.value1 = this.defaultCollege
          this.initMethods()
        }
      })
    },
    initMethods () {
      this.source = this.firstList
      this.$http({
        url: '/graph/Graph/allEvaluationSituation',
        method: 'post',
        data: {
          ids: '0,398dc5de2d504c429ffa83bc3ba5a988,',
          flag: ''
        },
        params: {
          institute: this.defaultCollege,
          grade: '',
          classe: ''
        }
      }).then(({data}) => {
        this.MapDatas = data.list[0]
        this.doposts()
        this.drawChart()
      })
    },
    getMap () {
      this.$http({
        url: '/graph/Graph/allEvaluationSituation',
        method: 'post',
        data: this.data,
        params: this.params
      }).then(({data}) => {
        console.log(data.list[0])
        this.MapData = data.list[0]
        this.dopost()
        this.drawChart()
      })
    },
    // 根据学院查询评价情况
    organizationMap () {
      this.$http({
        url: '/graph/Graph/organizatioEvaluationSituation',
        method: 'post',
        data: this.data,
        params: this.params
      }).then(({data}) => {
        for (let i = 0; i < data.list.length; i++) {
          if (data.list[i].institute === this.value1) {
            this.MapData = data.list[i]
            this.dopost()
          } else {
            // this.ifNull()
          }
        }
        this.drawChart()
      })
    },
    // 根据学院+班级查询评价情况
    gradeMap () {
      this.$http({
        url: '/graph/Graph/evaluationSituation',
        method: 'post',
        data: this.data,
        params: this.params
      }).then(({data}) => {
        for (let i = 0; i < data.list.length; i++) {
          if (data.list[i].institute === this.value1 && data.list[i].grade === this.value2) {
            this.MapData = data.list[i]
            this.dopost()
          } else {
              // this.ifNull()
          }
        }
        this.drawChart()
      })
    },
    ifNull () {
      this.shuju = []
      this.shuju.push({value: 0, name: '已评价'})
      this.shuju.push({value: 0, name: '未评价'})
    },
    // 给筛选后的评价情况赋值
    dopost () {
      this.re()
      this.shuju.push({value: this.MapData.isEvaluate, name: '已评价'})
      this.shuju.push({value: this.MapData.noEvaluate, name: '未评价'})
    },
    // 给全校评价情况赋值
    doposts () {
      this.re()
      this.shuju.push({value: this.MapDatas.isEvaluate, name: '已评价'})
      this.shuju.push({value: this.MapDatas.noEvaluate, name: '未评价'})
    },
    reset () {
      this.MapData = []
      this.shuju = []
      this.value1 = ''
      this.value2 = ''
      this.params.classe = ''
      this.params.institute = ''
      this.params.grade = ''
      // this.data.ids = ''
      this.data.ids = '0,398dc5de2d504c429ffa83bc3ba5a988,'
      this.data.flag = ''
      debounce(this.getMap, 2000, null, this)()
    },
    pinyinMatch (val) {
      this.copyDept = this.firstList
      if (val) {
        let result = [] // 声明一个空数组保存搜索内容
        this.copyDept.forEach(e => { // 循环判断内容和拼音首字母是否匹配
          let m = pinyin.match(e, val)
          if (m) {
            result.push(e)
          }
        })
        this.source = result // 返回匹配的数组
      } else {
        this.source = this.copyDept // 未输入返回开始copy的原数组
      }
    },
    re () {
      this.shuju = []
    },
    getTree () {
      this.$http({
        url: '/sys/office/treeData',
        method: 'get'
      }).then(({data}) => {
        // 把整个子节点都存到树表中
        this.dataList = data.treeData[0].children
        this.getNext()
        this.getUserInfo()
      })
    },
    getNext () {
      this.firstList.push(' ')
      for (let i = 0; i < this.dataList.length; i++) {
        this.firstList.push(this.dataList[i].name)
      }
    },
    drawChart () {
      var chartDom = document.getElementById('main')
      var myChart = this.$echarts.init(chartDom)
      var option
      option = {
        title: {
          text: this.value1 + this.value2 + '评价情况图表',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            color: [ '#46a4f7', '#36cbcb', '#11D074', '#fad337', '#9b5de5', '#f97476', '#655b7c', '#ffa62b', '#ffb8ff', '#80eb9a', '#feebad', '#c49f86', '#4aa0b6', '#babd8e' ],
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: this.shuju,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              normal: {
                label: {
                  show: true,
                  // formatter: '{b} : {c} ({d}%)' // 带当前图例名 + 百分比
                  formatter: '{d}%' // 只要百分比
                },
                labelLine: {show: true}
              }
            }
            // emphasis: {
            //   itemStyle: {
            //     shadowBlur: 10,
            //     shadowOffsetX: 0,
            //     shadowColor: 'rgba(0, 0, 0, 0.5)'
            //   }
            // },
            // normal:{
            //    label:{
            //       show: true,
            //       //formatter: '{b} : {c} ({d}%)' //带当前图例名 + 百分比
            //       formatter: '{d}%' //只要百分比
            //   },
            //   labelLine :{show:true}
            // }
          }
        ]
      }
      option && myChart.setOption(option)
    }
  }
}
</script>
